import 'package:demo_app_video/commons/router/routes.dart';
import 'package:demo_app_video/store/user.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class PersonalPage extends StatefulWidget {
  const PersonalPage({Key? key}) : super(key: key);

  @override
  State<PersonalPage> createState() => _PersonalPageState();
}

class _PersonalPageState extends State<PersonalPage>
    with AutomaticKeepAliveClientMixin {
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  checkLogin() {
    if ($UserStore.token == '') {
      Routes().pushNoParams(context, Routes.login);
      throw Exception('未登录');
    }
  }

  tpPage(path, {bool isLogin = false}) {
    if (isLogin) {
      checkLogin();
    }
    Routes().pushNoParams(context, path);
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      backgroundColor: Color(0xffFFFFFF),
      body: Stack(
        children: [
          Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('images/personal_bg.png'),
                      fit: BoxFit.fill))),
          SingleChildScrollView(
            padding: EdgeInsets.only(
                top: MediaQuery.of(context).padding.top + 44.h, left: 16.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                InkWell(
                  child: Observer(
                      builder: (_) => Row(
                            children: [
                              Container(
                                height: 60.w,
                                width: 60.w,
                                margin: EdgeInsets.only(right: 12.w),
                                decoration: BoxDecoration(
                                    image: DecorationImage(
                                        image: $UserStore.token == ''
                                            ? AssetImage(
                                                'images/morentouxiang.png')
                                            : NetworkImage(
                                                    '${$UserStore.userinfo['avatar']}')
                                                as ImageProvider),
                                    borderRadius: BorderRadius.circular(60.sp)),
                              ),
                              Expanded(
                                  child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '${$UserStore.token == '' ? '游客' : $UserStore.userinfo['nickname']}',
                                    style: TextStyle(
                                        color: Color(0xff1A1A1A),
                                        fontSize: 18.sp,
                                        fontWeight: FontWeight.w500),
                                  ),
                                  // Text(
                                  //   '推广码：${$UserStore.token == '' ? '请登录' : '555555'}',
                                  //   style: TextStyle(
                                  //       color: Color(0xff666666),
                                  //       fontSize: 14.sp),
                                  // )
                                ],
                              )),
                              // Image.asset(
                              //   'images/personal_share.png',
                              //   width: 60.w,
                              //   height: 24.h,
                              // )
                            ],
                          )),
                  onTap: () => checkLogin(),
                ),
                Container(
                  width: 328.w,
                  height: 124.h,
                  margin: EdgeInsets.only(top: 22.h),
                  decoration: BoxDecoration(
                      color: Color(0xffFFFFFF),
                      borderRadius: BorderRadius.circular(16.sp),
                      boxShadow: [
                        BoxShadow(
                            color: Color.fromRGBO(20, 20, 20, 0.1),
                            offset: Offset(0, 2.w),
                            blurRadius: 8.w,
                            spreadRadius: 0)
                      ]),
                  child: Column(
                    children: [
                      Container(
                        child: Text(
                          '常用功能',
                          style: TextStyle(
                              fontSize: 16.sp,
                              color: Color(0xff333333),
                              fontWeight: FontWeight.w500),
                        ),
                        margin: EdgeInsets.only(
                            left: 16.w, top: 16.h, bottom: 16.h),
                      ),
                      Row(
                        children: [
                          Expanded(
                              child: InkWell(
                            child: Container(
                              child: Column(
                                children: [
                                  Image.asset(
                                    'images/cideo_history.png',
                                    gaplessPlayback: true,
                                    excludeFromSemantics: true,
                                    width: 24.w,
                                    height: 24.w,
                                  ),
                                  Container(
                                    height: 4.h,
                                  ),
                                  Text(
                                    '观看历史',
                                    style: TextStyle(
                                        color: Color(0xff333333),
                                        fontSize: 13.sp),
                                  )
                                ],
                              ),
                            ),
                            onTap: () => tpPage(Routes.history),
                          )),
                          Expanded(
                              child: InkWell(
                            child: Container(
                              child: Column(
                                children: [
                                  Image.asset(
                                    'images/chat_lianxi.png',
                                    gaplessPlayback: true,
                                    excludeFromSemantics: true,
                                    width: 24.w,
                                    height: 24.w,
                                  ),
                                  Container(
                                    height: 4.h,
                                  ),
                                  Text(
                                    '联系客服',
                                    style: TextStyle(
                                        color: Color(0xff333333),
                                        fontSize: 13.sp),
                                  )
                                ],
                              ),
                            ),
                            onTap: () => tpPage(Routes.about_us),
                          )),
                          Expanded(
                              child: InkWell(
                            onTap: () => tpPage(Routes.adolescent),
                            child: Container(
                              child: Column(
                                children: [
                                  Image.asset(
                                    'images/my_tuans.png',
                                    gaplessPlayback: true,
                                    excludeFromSemantics: true,
                                    width: 24.w,
                                    height: 24.w,
                                  ),
                                  Container(
                                    height: 4.h,
                                  ),
                                  Text(
                                    '青少年模式',
                                    style: TextStyle(
                                        color: Color(0xff333333),
                                        fontSize: 13.sp),
                                  )
                                ],
                              ),
                            ),
                          )),
                          Expanded(
                              child: InkWell(
                            child: Container(
                              child: Column(
                                children: [
                                  Image.asset(
                                    'images/settings_icon.png',
                                    gaplessPlayback: true,
                                    excludeFromSemantics: true,
                                    width: 24.w,
                                    height: 24.w,
                                  ),
                                  Container(
                                    height: 4.h,
                                  ),
                                  Text(
                                    '设置',
                                    style: TextStyle(
                                        color: Color(0xff333333),
                                        fontSize: 13.sp),
                                  )
                                ],
                              ),
                            ),
                            onTap: () => tpPage(Routes.settings),
                          )),
                        ],
                      )
                    ],
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                ),
                // Container(
                //   width: 328.w,
                //   height: 144.h,
                //   padding: EdgeInsets.only(left: 16.w, right: 16.w),
                //   margin: EdgeInsets.only(top: 22.h),
                //   decoration: BoxDecoration(
                //       color: Color(0xffFFFFFF),
                //       borderRadius: BorderRadius.circular(16.sp),
                //       boxShadow: [
                //         BoxShadow(
                //             color: Color.fromRGBO(20, 20, 20, 0.1),
                //             offset: Offset(0, 2.w),
                //             blurRadius: 8.w,
                //             spreadRadius: 0)
                //       ]),
                //   child: Column(
                //     children: [
                //       Expanded(
                //           child: Row(
                //         children: [
                //           Image.asset(
                //             'images/saoyisao.png',
                //             width: 18.w,
                //             height: 18.w,
                //           ),
                //           Container(
                //             width: 8.w,
                //           ),
                //           Text('扫一扫'),
                //           Expanded(child: Container()),
                //           Image.asset(
                //             'images/arrow_right.png',
                //             width: 16.w,
                //           )
                //         ],
                //       )),
                //       Expanded(
                //           child: Row(
                //         children: [
                //           Image.asset(
                //             'images/qingshaonian.png',
                //             width: 18.w,
                //             height: 18.w,
                //           ),
                //           Container(
                //             width: 8.w,
                //           ),
                //           Text('青少年模式'),
                //           Expanded(child: Container()),
                //           Image.asset(
                //             'images/arrow_right.png',
                //             width: 16.w,
                //           )
                //         ],
                //       )),
                //       Expanded(
                //           child: Row(
                //         children: [
                //           Image.asset(
                //             'images/guanyuwomen.png',
                //             width: 18.w,
                //             height: 18.w,
                //           ),
                //           Container(
                //             width: 8.w,
                //           ),
                //           Text('关于我们'),
                //           Expanded(child: Container()),
                //           Image.asset(
                //             'images/arrow_right.png',
                //             width: 16.w,
                //           )
                //         ],
                //       )),
                //     ],
                //   ),
                // )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            width: 360.w,
            height: 44.h,
            alignment: Alignment.center,
            child: Text(
              '个人中心',
              style: TextStyle(
                  color: Color(0xff333333),
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w500),
            ),
          )
        ],
      ),
    );
  }
}
